<template>
    <div>
        <Card style="width:100%" shadow :bordered="false">
               <Form ref="totalInfo" :label-width="180" :model="pageInfo" label-position="right"  inline >
                   <Row>
                       <Col span="24">
                           <FormItem prop="pdoductId" label="金融产品" >
                               <Input type="text" v-model="pageInfo.productName" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Alert type="success">融资信息</Alert>
                   </Row>
                   <Row>
                       <Col span="8">
                           <FormItem prop="contAmt" label="合同价格">
                               <Input type="text" v-model="pageInfo.contAmt" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="loanAmt" label="贷款总额">
                               <Input type="number" v-model="pageInfo.loanAmt" @blur.native.capture="financeCalculate('01')" :disabled="!isCheck||!this.sameProduct" placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="downPayAmt" label="首付总额">
                               <Input type="text" v-model="pageInfo.downPayAmt" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span="8">
                           <FormItem prop="tailPayAmt" label="尾付总额">
                               <Input type="text" v-model="pageInfo.tailPayAmt" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="monthPayAmt" label="月供总额">
                               <Input type="text" v-model="pageInfo.monthPayAmt" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="interestAmt" label="利息总额">
                               <Input type="text" v-model="pageInfo.interestAmt" disabled placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                   </Row>
               </Form>
           </Card>
        <Card style="width:100%" shadow :bordered="false">
           <Row>
               <Alert type="success">车款</Alert>
           </Row>
           <Form ref="carAmt" :label-width="180" :model="pageInfo.carAmt" label-position="right" :rules="costLine" inline>
               <Row>
                   <Col span="8">
                       <FormItem prop="contAmt" label="车辆价格">
                           <Input type="text" v-model="pageInfo.carAmt.contAmt" disabled placeholder="请输入">
                           </Input>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="repayMode" label="还款方式">
                           <Select v-model="pageInfo.carAmt.repayMode" disabled placeholder="请选择">
                               <Option v-for="item in dataDic.repayMode" :label="item.title" :value="item.value" :key="item.value">{{ item.title }}</Option>
                           </Select>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="loanTerms" label="期数">
                           <Input type="number" v-model="pageInfo.carAmt.loanTerms" @blur.native.capture="financeCalculate('02')" placeholder="请输入" :disabled="!isCheck">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.loanTerms != pageInfo.carAmt.loanTerms">
                               <font color="red">{{pageInfo.carAmtCopy.loanTerms}}</font>
                           </span>
                       </FormItem>
                   </Col>
               </Row>
               <Row>
                   <Col span="8">
                       <FormItem prop="downPayMode" label="首尾付方式">
                           <Select v-model="pageInfo.carAmt.downPayMode" disabled placeholder="请选择">
                               <Option v-for="item in dataDic.downPayMode" :label="item.title" :value="item.value" :key="item.value">{{ item.title }}</Option>
                           </Select>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="downPayScale" label="首付比例">
                           <Input type="number" v-model="pageInfo.carAmt.downPayScale" @blur.native.capture="financeCalculate('03')" placeholder="请输入" :disabled="!isCheck">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.downPayScale != pageInfo.carAmt.downPayScale">
                               <font color="red">{{pageInfo.carAmtCopy.downPayScale}}</font>
                           </span>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="downPayAmt" label="首付金额">
                           <Input type="text" v-model="pageInfo.carAmt.downPayAmt"  disabled placeholder="请输入">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.downPayAmt != pageInfo.carAmt.downPayAmt">
                               <font color="red">{{pageInfo.carAmtCopy.downPayAmt}}</font>
                           </span>
                       </FormItem>
                   </Col>
               </Row>
               <Row>
                   <Col span="8">
                       <FormItem prop="custRate" label="客户利率">
                           <Input type="text" v-model="pageInfo.carAmt.custRate" disabled  placeholder="请输入">
                           </Input>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="tailPayScale" label="尾付比例">
                           <Input type="text" v-model="pageInfo.carAmt.tailPayScale" disabled  placeholder="请输入">
                           </Input>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="tailPayAmt" label="尾付金额">
                           <Input type="text" v-model="pageInfo.carAmt.tailPayAmt"  disabled placeholder="请输入">
                           </Input>
                       </FormItem>
                   </Col>
               </Row>
               <Row>
                   <Col span="8">
                       <FormItem prop="loanAmt" label="贷款金额">
                           <Input type="number" v-model="pageInfo.carAmt.loanAmt" @blur.native.capture="financeCalculate('04')" placeholder="请输入" :disabled="!isCheck">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.loanAmt != pageInfo.carAmt.loanAmt">
                               <font color="red">{{pageInfo.carAmtCopy.loanAmt}}</font>
                           </span>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="subsidyTotalAmt" label="贴息金额">
                           <Poptip placement="bottom" >
                               <Input type="text" v-model="pageInfo.carAmt.subsidyTotalAmt" disabled  placeholder="请输入">
                               </Input>
                               <a>明细</a>
                               <div slot="title" >贴息金额明细</div>
                               <div slot="content">
                                   <p v-for="item in pageInfo.carAmt.subsidyDetail">
                                       {{setDictTitleByType('discountParty',item.discountParty)}}金额{{item.discountAmt}}元
                                   </p>
                               </div>
                           </Poptip>
                       </FormItem>
                   </Col>
                   <Col span="8">
                       <FormItem prop="interestAmt" label="利息金额">
                           <Input type="text" v-model="pageInfo.carAmt.interestAmt" disabled  placeholder="请输入">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.interestAmt != pageInfo.carAmt.interestAmt">
                               <font color="red">{{pageInfo.carAmtCopy.interestAmt}}</font>
                           </span>
                       </FormItem>
                   </Col>
               </Row>
               <Row>
                   <Col span="24">
                       <FormItem prop="monthPayAmt" label="月供金额">
                           <Input type="text" v-model="pageInfo.carAmt.monthPayAmt" disabled  placeholder="请输入">
                           </Input>
                           <span v-show="pageInfo.carAmtCopy.monthPayAmt != pageInfo.carAmt.monthPayAmt">
                               <font color="red">{{pageInfo.carAmtCopy.monthPayAmt}}</font>
                           </span>
                       </FormItem>
                   </Col>
               </Row>
           </Form>
       </Card>
        <Card style="width:100%" shadow :bordered="false" v-show="this.hasAffix">
               <Row>
                   <Alert type="success">附加金额</Alert>
               </Row>
               <Form ref="affix" :label-width="180" :model="pageInfo.affix" label-position="right"  inline>
                   <Row>
                       <Col span="8">
                           <FormItem prop="contAmt" label="附加总额">
                               <Poptip placement="bottom" >
                                   <Input type="text" v-model="pageInfo.affix.contAmt" disabled  placeholder="请输入">
                                   </Input>
                                   <a>明细</a>
                                   <div slot="title" >附加金额明细</div>
                                   <div slot="content">
                                       <p v-for="item in pageInfo.affix.financingItems">
                                           {{item.financeItemName}}：{{item.financeItemAmt}}元
                                       </p>
                                   </div>
                               </Poptip>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="repayMode" label="还款方式">
                               <Select v-model="pageInfo.affix.repayMode" disabled placeholder="请选择">
                                   <Option v-for="item in dataDic.repayMode" :label="item.title" :value="item.value" :key="item.value">{{ item.title }}</Option>
                               </Select>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="loanTerms" label="期数">
                               <Input type="text" v-model="pageInfo.affix.loanTerms" @blur.native.capture="financeCalculate('05')" placeholder="请输入" :disabled="!isCheck">
                               </Input>
                               <span v-show="pageInfo.affixCopy.loanTerms != pageInfo.affix.loanTerms">
                                    <font color="red">{{pageInfo.affixCopy.loanTerms}}</font>
                               </span>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span="8">
                           <FormItem prop="downPayMode" label="首尾付方式">
                               <Select v-model="pageInfo.affix.downPayMode" disabled placeholder="请选择">
                                   <Option v-for="item in dataDic.downPayMode" :label="item.title" :value="item.value" :key="item.value">{{ item.title }}</Option>
                               </Select>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="downPayScale" label="首付比例">
                               <Input type="text" v-model="pageInfo.affix.downPayScale" @blur.native.capture="financeCalculate('06')" placeholder="请输入" :disabled="!isCheck">
                               </Input>
                               <span v-show="pageInfo.affixCopy.downPayScale != pageInfo.affix.downPayScale">
                                    <font color="red">{{pageInfo.affixCopy.downPayScale}}</font>
                               </span>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="downPayAmt" label="首付金额">
                               <Input type="text" v-model="pageInfo.affix.downPayAmt" disabled  placeholder="请输入">
                               </Input>
                               <span v-show="pageInfo.affixCopy.downPayAmt != pageInfo.affix.downPayAmt">
                                    <font color="red">{{pageInfo.affixCopy.downPayAmt}}</font>
                               </span>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span="8">
                           <FormItem prop="custRate" label="客户利率">
                               <Input type="text" v-model="pageInfo.affix.custRate" disabled  placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="tailPayScale" label="尾付比例">
                               <Input type="text" v-model="pageInfo.affix.tailPayScale" disabled  placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="tailPayAmt" label="尾付金额">
                               <Input type="text" v-model="pageInfo.affix.tailPayAmt" disabled  placeholder="请输入">
                               </Input>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span="8">
                           <FormItem prop="loanAmt" label="贷款金额">
                               <Input type="text" v-model="pageInfo.affix.loanAmt" @blur.native.capture="financeCalculate('07')" placeholder="请输入" :disabled="!isCheck">
                               </Input>
                               <span v-show="pageInfo.affixCopy.loanAmt != pageInfo.affix.loanAmt">
                                    <font color="red">{{pageInfo.affixCopy.loanAmt}}</font>
                               </span>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="interestAmt" label="利息总额">
                               <Input type="text" v-model="pageInfo.affix.interestAmt" disabled  placeholder="请输入">
                               </Input>
                               <span v-show="pageInfo.affixCopy.interestAmt != pageInfo.affix.interestAmt">
                                    <font color="red">{{pageInfo.affixCopy.interestAmt}}</font>
                               </span>
                           </FormItem>
                       </Col>
                       <Col span="8">
                           <FormItem prop="subsidyTotalAmt" label="贴息金额">
                               <Poptip placement="bottom" >
                                   <Input type="text" v-model="pageInfo.affix.subsidyTotalAmt" disabled  placeholder="请输入">
                                   </Input>
                                   <a>明细</a>
                                   <div slot="title" >贴息金额明细</div>
                                   <div slot="content">
                                       <p v-for="item in pageInfo.affix.subsidyDetail">
                                           {{setDictTitleByType('discountParty',item.discountParty)}}金额{{item.discountAmt}}元
                                       </p>
                                   </div>
                               </Poptip>
                           </FormItem>
                       </Col>
                   </Row>
                   <Row>
                       <Col span="24">
                           <FormItem prop="monthPayAmt" label="月供金额">
                               <Input type="text" v-model="pageInfo.affix.monthPayAmt" disabled  placeholder="请输入">
                               </Input>
                               <span v-show="pageInfo.affixCopy.monthPayAmt != pageInfo.affix.monthPayAmt">
                                    <font color="red">{{pageInfo.affixCopy.monthPayAmt}}</font>
                               </span>
                           </FormItem>
                       </Col>
                   </Row>
               </Form>
           </Card>
    </div>
</template>

<script>
    import {
        getByTypes
    } from "_p/basic/api/admin/datadic";
    import {
        queryApprovePageInfo,
        reFinanceCalculate
    } from "../../../../api/afs-case/infomationDetail/applyCostDetail";
    export default {
        name: "apply-cost-detail",
        props: {
            applyNo: {
                type: String,
                required: true
            },
            isCheck: {
                type: Boolean
            }
        },
        data:function () {
            return {
                applyNumber:this.applyNo,
                hasAffix :false,
                dicKeys: [
                    "repayMode","downPayMode","discountParty"
                ],
                dataDic:{},
                costLine:{},
                affixCopyed:false,
                carAmtCopyed:false,
                sameProduct:true,
                pageInfo:{
                    affix:{},
                    affixCopy:{},
                    carAmt:{
                        subsidyDetail:[]
                    },
                    carAmtCopy:{}
                }
            }
        },
        methods:{
            getDic(v){
                let dic = []
                switch(v) {
                    case "discountParty":
                        dic = this.dataDic.discountParty;
                        break;
                    case "downPayMode":
                        dic = this.dataDic.downPayMode;
                        break;
                    case "repayMode":
                        dic = this.dataDic.repayMode;
                        break;
                    default:
                }
                return dic;
            },
            setDictTitleByType(v1,v2){
                let dic = {}
                if(!this.getDic(v1)) return '';
                this.getDic(v1).forEach(column => {
                    if(column.value === v2){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.dataDic=res.data;
                    }
                });
            },
            initInfo(){
                let params = {
                    applyNo: this.applyNumber
                }
                queryApprovePageInfo(params).then(res => {
                    if (res.code === "0000" && res.data) {
                        this.pageInfo = res.data;
                        this.hasAffix = this.pageInfo.hasAffix;
                        this.sameProduct = this.pageInfo.sameProduct;
                    }
                });
            },
            init() {
                this.initDataDic();
                this.initInfo();
            },
            financeCalculate(type){
                let value = 0;
                switch (type) {
                    case '01':value = this.pageInfo.loanAmt;break;
                    case '02':value = this.pageInfo.carAmt.loanTerms;break;
                    case '03':value = this.pageInfo.carAmt.downPayScale;break;
                    case '04':value = this.pageInfo.carAmt.loanAmt;break;
                    case '05':value = this.pageInfo.affix.loanTerms;break;
                    case '06':value = this.pageInfo.affix.downPayScale;break;
                    case '07':value = this.pageInfo.affix.loanAmt;break;
                    default : return false;
                } ;
                let params = {
                    applyNo : this.applyNumber,
                    hasAffix: this.hasAffix,
                    sameProduct: this.sameProduct,
                    carId:this.pageInfo.carAmt.carId,
                    value:value,
                    tailPayAmt:this.pageInfo.tailPayAmt,
                    contAmt:this.pageInfo.contAmt,
                    calculateType: type//01-贷款总额,02-车款期数,03-车款首付比例,04-车款贷款金额,05-附加贷期数,06-附加贷首付比例,07-附加贷贷款金额
                }
                this.$Spin.show();
                reFinanceCalculate(params).then(res => {
                    this.$Spin.hide();
                    if (res.code === "0000" && res.data) {
                        this.pageInfo = res.data;
                        this.hasAffix = this.pageInfo.hasAffix;
                        this.sameProduct = this.pageInfo.sameProduct;
                    }
                });
            },
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

</style>
